<template>
  <br />
  <div>
    <z-row>
      <z-col :span="12">
        <z-slider v-model:value="inputValue1" :min="1" :max="20" />
      </z-col>
      <z-col :span="4">
        <z-input-number v-model:value="inputValue1" :min="1" :max="20" style="margin-left: 16px" />
      </z-col>
    </z-row>
    <br />
    <z-row>
      <z-col :span="12">
        <z-slider v-model:value="inputValue" :min="0" :max="1" :step="0.01" />
      </z-col>
      <z-col :span="4">
        <z-input-number
          v-model:value="inputValue"
          :min="0"
          :max="1"
          :step="0.01"
          style="margin-left: 16px"
        />
      </z-col>
    </z-row>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const inputValue = ref(0)
    const inputValue1 = ref(1)
    return {
      inputValue,
      inputValue1
    }
  }
})
</script>
<style scoped>
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>
